import React from 'react';
import axios from "axios";
import EChartsComponent from './EChartsComponent';

export default class Echarts02 extends React.Component {
  state = {
    chartOption: {
      title: { text: '正在加载数据...' },
      tooltip: {},
      legend: { data: ['销量', '月销售额'] },
      xAxis: { data: [] },
      yAxis: {},
      series: []
    }
  };

  componentDidMount(){
      axios.get('http://localhost:3000/api1/productSales')
          .then((response)=> {
            const backendData = response.data.data;
            // 前端转换数据格式
            const newOption = {
                title: {
                  text: '商品销量与销售额对比'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross' // 显示交叉指示线
                  }
                },
                legend: {
                  data: ['月销量', '月销售额']
                },
                grid: {
                  top: '15%', // 调整图表与顶部的距离
                  right: '10%' // 为第二个 Y 轴留空间
                },
                xAxis: {
                  type: 'category',
                  data: backendData.map(item => item.product_name) // 建议用产品名称而非分类
                },
                yAxis: [
                  {
                    type: 'value',
                    name: '销量（件）',
                    position: 'left',
                    axisLine: {
                      lineStyle: {
                        color: '#5470C6' // 销量轴颜色与柱状图一致
                      }
                    },
                    axisLabel: {
                      formatter: '{value}' // 可自定义格式
                    }
                  },
                  {
                    type: 'value',
                    name: '销售额（元）',
                    position: 'right',
                    axisLine: {
                      lineStyle: {
                        color: '#EE6666' // 销售额轴颜色与折线图一致
                      }
                    },
                    axisLabel: {
                      formatter: '{value}' // 可自定义为 '¥{value}'
                    },
                    // 如果销售额数值太大，可以调整刻度间隔
                    splitNumber: 4
                  }
                ],
                series: [
                  {
                    name: '月销量',
                    type: 'bar',
                    data: backendData.map(item => item.sales_volume),
                    itemStyle: {
                      color: '#5470C6'
                    },
                    // 可选：在柱子上显示数值
                    label: {
                      show: true,
                      position: 'top'
                    }
                  },
                  {
                    name: '月销售额',
                    type: 'line',
                    yAxisIndex: 1, // 关联到第二个 Y 轴（索引从 0 开始）
                    data: backendData.map(item => parseFloat(item.monthly_sales)),
                    itemStyle: {
                      color: '#EE6666'
                    },
                    // 可选：在折线上显示数值
                    label: {
                      show: true,
                      formatter: '¥{c}' // 显示为 ¥ + 数值
                    },
                    smooth: true // 平滑曲线（可选）
                  }
                ]
              };
            // 将数据存入 state
            this.setState({
              chartOption: newOption,
            });
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
  }
  render() {
    return (
      <div>
        <h1>类式组件中使用ECharts进阶示例</h1>
        <EChartsComponent option={this.state.chartOption} />
      </div>
    )
  }
}
